<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>用户列表</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_list_container">
      <div class="seed_list_ss" style="width: 100% !important;">
        <div class="seed_list_ssk seed_user_list_ssk">
          <img src="@/assets/images/ss.png" alt="">
          <input class="seed_list_ss" type="text" name="username" placeholder="输入用户名称" v-model="param.username">
        </div>
        <input class="seed_list_ssb" type="button" value="搜索" @click="search">
      </div>
      <div class="seed_list_second" style="margin-bottom: 0 !important; padding: 0 0.8rem !important;"
         v-infinite-scroll="loadMoreUsers"
         infinite-scroll-disabled="false"
         infinite-scroll-distance="0"
         infinite-scroll-immediate-check="false">
        <!--每一个订单-->
        <div class="seed_list_second_list seed_user_list_second_list" v-for="(item, index) in list" v-bind:key="index">
          <div class="seed_user_list_box_top">
            <div class="seed_user_list_box_top_l">
              <img src="@/assets/images/xcxgl.png" style="width: 1.2rem;vertical-align: middle;margin-top: -0.3rem"/>&ensp;
              {{item.app_name}}
            </div>
            <div class="seed_user_list_box_top_r" v-if="item.is_lock === 0">正常使用</div>
            <div class="seed_user_list_box_top_r" v-if="item.is_lock === 1">已锁定</div>
          </div>
          <div class="seed_list_second_cbox seed_user_list_cbox">
            <img v-bind:src="item.avatar">
            <div class="seed_list_second_cbox_r" style="height: 7rem; width: 100% !important;">
              <p class="seed_list_second_cbox_r_t seed_user_list_name">{{item.nickname}}</p>
              <p class="seed_user_list_brief">性别: <span v-if="item.sex === 1">男</span><span v-if="item.sex === 2">女</span></p>
              <div class="seed_list_second_cbox_b seed_user_list_price_box">
                <div class="seed_user_list_second_cbox_b_l" style="margin-left: 0.5rem;">
                  <span>注册时间: {{item.reg_time}}</span>
                </div>
                <div class="seed_user_list_second_cbox_b_r" style="margin-right: 0.5rem;">
                  <button @click="edit(item.id)">编辑</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <loading-more :allLoaded="allLoaded" :show="list.length > 0"></loading-more>
      <empty-data :show="allLoaded && list.length <= 0" style="margin-top: 1rem"></empty-data>
      <back-nav></back-nav>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      param: {
        page: 1,
        page_size: 5,
        username: ''
      },
      allLoaded: false,
      loading: false
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    back () {
      this.$router.push({name: 'Home'})
    },
    getUserList () {
      this.loading = true
      this.$request.UserList(this.param).then(data => {
        if (this.param.page_size > data.length) {
          this.allLoaded = true
        }
        this.list = [...this.list, ...data]
      }).finally(() => {
        this.loading = false
      })
    },
    loadMoreUsers () {
      if (this.loading || this.allLoaded) { // 正在加载 或 已取得全部数据
        return
      }
      setTimeout(() => {
        ++this.param.page
        this.getUserList()
      }, 300)
    },
    search: function () {
      this.param.page = 1
      this.param.page_size = 5
      this.allLoaded = false
      this.loading = false
      this.list = []
      this.getUserList()
    },
    edit: function (id) {
      this.$router.push({name: 'user-edit', params: {id: id}})
    }
  }
}
</script>
